<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
        }
        li {
            width: 20%;
            margin-bottom: 30px;
        }
        li img {
            width: 100%;
        }
    </style>
</head>
<body>
    <ul>
       </a>
    </ul>

    <button>点我</button>
    <div class="result"></div>
</body>
<script src="./http.js"></script>
<script>
    let page = 1, total_page = 0;

    let getList = async () => {
        let res = await http.get({
            url: 'http://127.0.0.1:3000/api/json/classList',
            data: {
                id: 253,
                page
            }
        });
        total_page = res.total_page
        renderPage(res)
    }

    let renderPage = (res) => {
        res.data.forEach(v => {
            $("ul").innerHTML += `
             <li>
                <a target="_blank" href="./info.html?id=${v.id}&total=${v.total}">
                  <img src="${v.preview}" alt="">
                  <p>${v.title}</p>
                </a>
             </li>`
        });
    }


    $("button").onclick = () => {
        page +=1;
        if (page <= total_page) {
            getList()
        } else {
            $(".result").innerText = "没有数据了"
        }
    }



    getList()




    function $(className) {
        return document.querySelector(className);
    }
</script>
</html>